
import Articlenav from '@/components/articlenav'
import Articletitle from '@/components/articletitle'
import styles from '../styles/index.less'
import classNames from 'classnames'
import { ArticleModelState, Link, Loading, useDispatch, useSelector } from 'umi';
import { useEffect } from 'react';
import { formatDate } from '@/utils/index'

import StickyCardRead from '@/components/stickyCardRead'
import StickyCardTag from '@/components/stickyCardTag'
import { EyeOutlined, HeartOutlined, PartitionOutlined } from '@ant-design/icons';
import Popup from '@/components/Popup';

function Be() {

    const { article, loading } = useSelector((state: { article: ArticleModelState, loading: Loading }) => {
        return {
            article: state.article,
            loading: state.loading
        }
    });

    const dispatch = useDispatch();


    // hooks的生命周期
    useEffect(() => {
        dispatch({
            type: 'article/getArticleBe',
        })
    }, []);

    return <div className={styles.fe}>
        {/* <div className={styles.header}>
            头部导航
        </div> */}
        <div className={classNames(styles.container, styles.view)}>
            <div className={classNames(styles.content, styles.views)}>
                <div className={styles.left}>
                    <div className={styles.text}>
                        <p><span className={styles.title}>后端 </span>分类文章</p>
                        <p>共搜索到 <span className={styles.num}> {article.getArticleFe.length} </span>篇</p>
                    </div>
                    <div className={styles.article}>
                        <Articlenav></Articlenav>
                        <div className={styles.articleList}>
                            {
                                article.getArticleFe && article.getArticleFe.length > 0 ? article.getArticleFe.map((item, index) => {
                                    return<div onClick={() => {
                                        history.push(`/article/${item.id}`)
                                    }} key={index}>
                                        <div className={styles.articleListitem}>
                                            <header>
                                                <div className={styles.titles1}>
                                                    <p>{item.title}</p>
                                                </div>
                                                <div className={styles.titles2}>
                                                    <span className={classNames(styles.shu, styles.shu1)}> ︱</span>
                                                    <span>{formatDate(item.publishAt)}前</span>
                                                    {
                                                        item.category != null ? <span className={styles.shu}>  ︱ </span> : null
                                                    }
                                                    <span>{item.category?.label}</span>
                                                </div>
                                            </header>
                                            <main className={styles.titleitem}>
                                                {
                                                    item.cover != null ? <div className={styles.imgs}>
                                                        <img src={item.cover} alt="" />
                                                    </div> : null
                                                }
                                                <div className={styles.rightitem}>
                                                    <p>{item.summary}</p>
                                                    <div>
                                                        <span><i><HeartOutlined /></i> {item.likes}</span>
                                                        {/* <b>.</b> */}
                                                        <span><i><EyeOutlined /></i> {item.views}</span>
                                                        {/* <b>.</b> */}
                                                        <span onClick={(e) => {
                                                            e.stopPropagation()
                                                        }}><i><PartitionOutlined /></i> <Popup ProputItem={item}>分享</Popup></span>
                                                    </div>
                                                </div>
                                            </main>
                                        </div>

                                    </div>
                                }) : <div className={styles.nodate}>暂无数据</div>
                            }
                        </div>
                    </div>
                </div>
                <div className={styles.right}>
                    <div className={styles.recommend}>
                        <StickyCardRead></StickyCardRead>
                    </div>
                    <div className={styles.tag}>
                        <StickyCardTag></StickyCardTag>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

export default Be